<template>
    <!-- 加载中动画 -->
    <div v-if="isChecking" class="loading">
        <div class="spinner"></div>
    </div>

    <router-view v-if="canAccess"></router-view>
    <div v-else class="blocked">
        <h2>⚠️ 访问受限</h2>

        <!-- 显示授权码调试信息 -->
        <p style="margin-top: 10px; color: #909399;">
            err: {{ logs }}
        </p>

    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import {isDingTalkEnv, isDingTalkPC, getAuthCode} from './utils/dingtalk'
    import api from './api'
    import {DING_CONFIG} from './utils/config'

    export default {
        setup() {
            const canAccess = ref(false)
            const logs = ref('') // 🔹 用来绑定显示 authCode
            const isChecking = ref(true); // ✅ 加载状态
            onMounted(async () => {
                if (!isDingTalkEnv()) {
                    logs.value = "不是钉钉环境"
                    isChecking.value = false;
                    return
                }
                let logs_str = ""
                try {
                    if (!isDingTalkEnv()) {
                        logs.value = "不是钉钉环境"
                        return
                    }

                    let code = null

                    // 🖥️ 钉钉 PC 端
                    logs_str = `isDingTalkPC:${isDingTalkPC()}  `
                    if (isDingTalkPC()) {
                        const urlParams = new URLSearchParams(window.location.search)
                        code = urlParams.get('authCode') // PC端钉钉 H5 微应用会自动带这个参数
                        console.log('PC端 authCode:', code)
                        logs_str += `🖥️ PC端 authCode: ${code || '未获取到'}  urlParams:${urlParams}`
                    }

                    // 📱 钉钉移动端
                    if (!code) {
                        code = await getAuthCode(DING_CONFIG.corpId)
                        console.log('移动端 authCode:', code)
                        logs_str += `🖥️ 🖥️移动端 authCode: ${code || '未获取到'}`
                    }

                    // 调用后端验证
                    const res = await fetch(`${DING_CONFIG.baseURL}/getUserInfo?code=${code}`)
                    logs_str += `🖥️ 🖥️用户信息: ${res || '未获取到'}`
                    const data = await res.json()

                    if (data.isInternal) {
                        canAccess.value = true
                        console.log('✅ 企业内部员工，允许访问')
                    } else {
                        console.warn('❌ 外部用户，拒绝访问')
                    }
                }
                catch (e) {
                    logs_str += `🖥️ 🖥异常: ${e}`
                }finally {
                    isChecking.value = false; // ✅ 加载完成后关闭动画
                }
                logs.value = logs_str

                // canAccess.value = !!data.isInternal
                canAccess.value = true
            })
            return {canAccess, logs,isChecking}
        }

        // setup() {
        //     const canAccess = ref(true)
        //     const logs = ref('') // 🔹 用来绑定显示 authCode
        //     const isChecking = ref(false); // ✅ 加载状态
        //     return {canAccess, logs,isChecking}
        // }
    }
</script>

<style>

    /* 加载动画容器 */
    .loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: #ffffff;
    }

    /* 圆形旋转动画 */
    .spinner {
        width: 48px;
        height: 48px;
        border: 4px solid #e0e6f1;
        border-top: 4px solid #3471ea;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }



    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }


    .blocked {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        color: #f56c6c;
    }
</style>


